<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
 <h2>{{ a }}</h2>
  <ul>
   <li v-for="item in b">
     {{ item }}
   </li>
</ul>
 <ul>
   <li v-for="item in products">
     <input type="number" v-model.number="item.quantity">
     {{item.name}}
     {{item}}
     <span v-if="item.quantity === 0">
        - OUT OF STOCK
    </span>
   <button @click="item.quantity += 1">Add</button>
   </li>
</ul>
<h2>{{ totalProducts }}</h2>
</div>

<script>
//创建Vue对象
var app = new Vue({
  el: '#app',  // 绑定元素
  data: {   // 对象属性
    products: [],
    a: 'aaa',
    b: ['a','b','c','d']
  },
  //总量，重点reduce
  computed:{
    totalProducts () {
       return this.products.reduce((sum, product) => {
         return sum + product.quantity
       }, 0)
    }
  },
  //调用API
  created () {
    fetch('https://api.myjson.com/bins/74l63').then(response => response.json()).then(json => {this.products = json.products})
  }
})
</script>
</body>
</html>
